<template>
  <div>
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item-group>
            <el-menu-item index="/info">个人信息</el-menu-item>
            <el-menu-item index="/History">我的订单</el-menu-item>
            <el-menu-item index="/fav">我的收藏</el-menu-item>
            <el-menu-item index="/index/UserManagement">我的商品</el-menu-item>
            <el-menu-item index="/authentica">身份认证</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div>
        <el-card>
          <div ><h4>头像区</h4></div>
        </el-card>
      </el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light"></div>
        <el-card>
          <div><h4>实名认证</h4></div>
        </el-card>
        <el-card>
          <div><h4>完成实名认证，享受更多服务</h4></div>
        </el-card>
        <el-button type="primary">去认证</el-button>
      </el-col>
    </el-row>
    <!--<el-row>-->
      <!--<el-col :span="4"><div class="grid-content bg-purple"></div>-->
        <!--<el-card>-->
          <!--<div ><h4>头像区</h4></div>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <!--<el-col :span="20"><div class="grid-content bg-purple-light"></div>-->
        <!--<el-card>-->
          <!--<div><h4>实名认证</h4></div>-->
        <!--</el-card>-->
        <!--<el-card>-->
          <!--<div><h4>完成实名认证，享受更多服务</h4></div>-->
        <!--</el-card>-->
        <!--<el-button type="primary">去认证</el-button>-->
      <!--</el-col>-->
    <!--</el-row>-->
  </div>
</template>

<script>
export default {
  name: 'authentication'
}
</script>

<style scoped>

</style>
